<script setup lang="ts">
import { getAddressOption } from '@/apis/public';
import { RegionType } from '@/types/public';
import { computed, onMounted, ref } from 'vue';

const props = defineProps<{
    label: string,
    provinceCode: string,
    cityCode: string,
    countyCode: string,
}>();

const emit = defineEmits<{
    change: [value: { provinceCode: string, cityCode: string, countyCode: string, fullRegion: string }]
}>();

// 地区总列表
const regionList = ref<Array<RegionType>>();
onMounted(async () => {
    const response = await getAddressOption();
    regionList.value = response.data;
});

// 创建响应式表单数据
const province = computed({
    get: () => props.provinceCode,
    set: value => emit('change', {
        provinceCode: value,
        cityCode: '',
        countyCode: '',
        fullRegion: '',
    }),
});
const city = computed({
    get: () => props.cityCode,
    set: value => emit('change', {
        provinceCode: province.value,
        cityCode: value,
        countyCode: '',
        fullRegion: '',
    }),
});
const county = computed({
    get: () => props.countyCode,
    set: value => emit('change', {
        provinceCode: province.value,
        cityCode: city.value,
        countyCode: value,
        fullRegion: `${regionList.value?.find(i => i.code === province.value)?.name}${cityList.value?.find(i => i.code === city.value)?.name}${countyList.value?.find(i => i.code === value)?.name}`,
    }),
});

// 次级地区选项列表
const cityList = computed(() => regionList.value?.find(i => i.code === province.value)?.areaList);
const countyList = computed(() => cityList.value?.find(i => i.code === city.value)?.areaList);
</script>

<template>
    <el-form-item :label="props.label" label-width="7rem" :style="{ width: '100%' }">
        <div class="inline">
            <el-form-item prop="provinceCode">
                <el-select popper-class="region-select" v-model="province" placeholder="省" no-data-text="-">
                    <el-option v-for="item in regionList || []" :key="item.code" :value="item.code"
                        :label="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item prop="cityCode">
                <el-select popper-class="region-select" v-model="city" placeholder="市" no-data-text="-">
                    <el-option v-for="item in cityList || []" :key="item.code" :value="item.code" :label="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item prop="countyCode">
                <el-select popper-class="region-select" v-model="county" placeholder="区" no-data-text="-">
                    <el-option v-for="item in countyList || []" :key="item.code" :value="item.code"
                        :label="item.name" />
                </el-select>
            </el-form-item>
        </div>
    </el-form-item>
</template>

<style scoped lang="scss">
.inline {
    flex-grow: 1;
    display: flex;
    align-items: center;

    &>div {
        flex-grow: 1;
    }

    &>div:not(:last-child) {
        margin-right: 0.5rem;
    }

}
</style>